<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>OSS参数配置</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="author" content="shiva"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="stylesheet" type="text/css" th:href="@{/fms.css}" media="all">
    <script th:src="@{/static/plugin/vue.global.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/static/plugin/vant/index.css}" media="all">
    <script th:src="@{/static/plugin/vant/vant.min.js}"></script>
    <link rel="icon" th:href="@{/static/images/favicon.ico}" type="image/x-icon"/>
    <link rel="shortcut icon" th:href="@{/static/images/favicon.ico}"/>

    <script th:src="@{/static/plugin/jsencrypt.min.js}"></script>
    <script th:src="@{/static/common.js}"></script>
</head>
<body style="background-color: #eaeaea">
<div id="app">

    <van-nav-bar
            title="OSS 参数配置"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
    ></van-nav-bar>

    <div style="margin-top: 15px" class="oss-params">
        <van-cell-group inset>
            <van-field v-model="ossParams.endpoint" label="endpoint" placeholder="请输入"></van-field>
            <div class="oss-params-label">
                例如：https://oss-cn-hangzhou.aliyuncs.com
            </div>
            <van-field v-model="ossParams.accessKeyId" label="accessKeyId" placeholder="请输入"></van-field>
            <div class="oss-params-label">
                阿里云OSS密钥ID
            </div>
            <van-field v-model="ossParams.accessKeySecret" label="accessKeySecret" placeholder="请输入"></van-field>
            <div class="oss-params-label">
                阿里云OSS密钥值
            </div>
            <van-field v-model="ossParams.bucketName" label="bucketName" placeholder="请输入"></van-field>
            <div class="oss-params-label">
                bucket空间名，例如：xiaoshuo，不需要带斜杠
            </div>
            <van-field v-model="ossParams.areaSuffix" label="areaSuffix" placeholder="请输入"></van-field>
            <div class="oss-params-label" style="margin-bottom: 15px">
                链接后缀，例如：.oss-cn-hangzhou.aliyuncs.com/
            </div>
        </van-cell-group>

    </div>

    <div style="text-align: center;margin: 15px 25px">
        <van-button type="primary" size="large" @click="saveOssParams">确 认 输 入</van-button>
    </div>

</div>
<script>
    Vue.createApp({
        el: '#app',
        data() {
            return {
                requestHeaders: {},
                ossParams: {
                    endpoint: '',
                    accessKeyId: '',
                    accessKeySecret: '',
                    areaSuffix: '',
                    bucketName: '',
                }
            }
        },
        created() {
            const that = this
            setTimeout(() => {
                that.requestHeaders = commonHeaders()
                that.getOssParams();
            }, 200)
        },
        methods: {
            onClickLeft() {
                window.location.href = '/m/page?type=settings'
            },
            //拿到参数
            getOssParams() {
                const that = this
                //发请求，获取目录
                fetch('/api/config/getOssParams', {
                    method: 'GET',
                    headers: that.requestHeaders,
                }).then(response => response.json())
                    .then(data => {
                        that.ossParams = data.data
                    })
            },
            saveOssParams() {
                const that = this
                //发请求，获取目录
                fetch('/api/config/saveOssParams', {
                    method: 'POST',
                    headers: that.requestHeaders,
                    body: JSON.stringify(that.ossParams),
                }).then(response => response.json())
                    .then(data => {
                        vt4.showNotify({type: 'success', message: '保存成功'});
                    })
            }
        }
    }).use(vant).mount("#app");
    const vt4 = vant;
</script>
</body>
</html>